<template>
  <div id="app">
    <!-- 路由跳转 -->
    <button :class="{'my-active':'home'==active}" @click="handlerToPage('home')">首页</button>&nbsp;&nbsp;&nbsp;
    <button  :class="{'my-active':'news'==active}" @click="handlerToPage('news')">新闻</button>&nbsp;&nbsp;&nbsp;
    <button  :class="{'my-active':'list'==active}" @click="handlerToPage('list')">列表</button>&nbsp;&nbsp;&nbsp;
    <hr />
    <router-view />
    <hr>
    <h1>参数传递</h1>
    <button  @click="handlerToParams01">url上传参</button>&nbsp;&nbsp;&nbsp;
  </div>
</template>
<script>
export default {
    data() {
      return {
          active:'home'
      }
    },
    watch:{
      "$route":{
          handler(route) {
            console.log(route);
            this.active = route.meta.pActive || route.meta.active


          },
          deep:true,
          immediate:true
      }

    },
    methods:{
      handlerToPage(type) {
        console.log(this);
        // this.active = type
        // 根据url路径进行跳转
        this.$router.push({
          path:`/${type}`
        })
        // 根据路由名字进行跳转
        // this.$router.push({
        //   name:`${type}`
        // })
      },
      handlerToParams01() {
        // 参数以key = value 的形式传递  参数接收都在prams中
        // this.$router.push({
        //   path:`/params?id=1001&name=小明`
        // })
        // name的方式 进行参数传递
        // this.$router.push({
        //   name:`params`,
        //   query:{
        //      id:1002,
        //      name:"小红"
        //   }
        // })
        // 参数不在url上显示
        // this.$router.push({
        //   name:`params`,
        //   params:{
        //      id:1002,
        //      name:"小红"
        //   }
        // })
        this.$router.push({
          path:`/params/1001/小红`
        })
      }
      // handlerToPage() {
      //   // alert("跳转")
      //   // console.log(this);
      //   this.$router.push("/home")
      // },
      // handlerToPage2() {
      //   // alert("跳转")
      //   // console.log(this);
      //   this.$router.push({
      //     path:"/news"
      //   })
      // }
    }

}
</script>

<style>
</style>
